<template>
  <div>
    <audio v-for="(audioUrl,i) in audioUrls" :key="i" ref="audios"
           :src="audioUrl" class="plugin-audio"
           @canplay="onLoaded" @play="onPlayStarted(i)" @ended="onPlayStopped(i)" />
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
const $ = window.$
export default {
  name: 'Audio',
  data: () => {
    return {
      audioUrls: undefined,
      loadStatus: undefined,
      onLoaded: () => {},
      onPlayStarted: (audioIndex) => {},
      playing: false,
      onAudiosPlayStopped: () => {}
    }
  },
  methods: {
    play: function (option) {
      const resultOption = $.extend({
        audioUrls: undefined,
        onStartPlay: () => {},
        onAudiosPlayStopped: () => {}
      }, option)

      const audioUrls = resultOption.audioUrls
      this.audioUrls = audioUrls
      this.onAudiosPlayStopped = resultOption.onAudiosPlayStopped

      this.onPlayStarted = (audioIndex) => {
        this.onPlayStarted = () => {}

        if (audioIndex === 0) {
          setTimeout(() => {
            resultOption.onStartPlay()
          }, 1000)
        }
      }
      setTimeout(() => {
        // eslint-disable-next-line no-undef
        Inner.data.load({
          self: this,
          onLoaded: () => {
            this.playing = true
            const firstAudio = this.$refs.audios[0]
            firstAudio.currentTime = 0
            firstAudio.play()
          }
        })
      })
    },
    pause: function () {
      const audios = this.$refs.audios
      if (audios) {
        $.each(audios, (index, audio) => {
          audio.pause()
        })
      }
    },
    adjustPlayTime: function (option) {
      const resultOption = $.extend({
        timeRate: 0
      }, option)

      const audios = this.$refs.audios
      this.playing = true

      let totalDuration = 0
      $.each(audios, (index, audio) => {
        totalDuration += audio.duration
      })
      let newTime = totalDuration * resultOption.timeRate
      let currentNewTime = newTime
      $.each(audios, (index, audio) => {
        if (currentNewTime <= audio.duration) {
          audio.currentTime = currentNewTime
          audio.play()
        } else {
          currentNewTime -= audio.duration
        }
      })
    },
    onPlayStopped: function (index) {
      if (this.playing) {
        const nextIndex = index + 1
        if (nextIndex <= this.audioUrls.length - 1) {
          const nextAudio = this.$refs.audios[nextIndex]
          nextAudio.currentTime = 0
          nextAudio.play()
        } else {
          this.playing = false
          this.onAudiosPlayStopped()
        }
      }
    }
  }
}

const Inner = {
  data: {
    load: function (option) {
      const resultOption = $.extend({
        self: undefined,
        onLoaded: function () {}
      }, option)

      const self = resultOption.self
      const audios = self.$refs.audios

      let loadedCount = 0
      self.onLoaded = () => {
        loadedCount++
        if (loadedCount === audios.length) {
          resultOption.onLoaded()
        }
      }

      $.each(audios, (index, audio) => {
        audio.load()
      })
    }
  }
}
</script>
